<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
//都是用import导入的 把上面(11XXX.html)的代码修改为import导入的 

//修改components.ts文件 
    //现在去掉components.ts里的 namespace命名空间代码 
    //改为es6的export导出模式 代码如下 
    export class Header {
    constructor() {
        const elem = document.createElement("div");
        elem.innerText = "This is Header";
        document.body.appendChild(elem);
    }
    }

    export class Content {
    constructor() {
        const elem = document.createElement("div");
        elem.innerText = "This is Content";
        document.body.appendChild(elem);
    }
    }

    export class Footer {
    constructor() {
        const elem = document.createElement("div");
        elem.innerText = "This is Footer";
        document.body.appendChild(elem);
    }
    }
    //现在这三个类 都已经用export导出了 即可以实现用import进行导入了  
 
//修改page.ts文件 
    /*来到page.ts文件，去掉namespace命名空间对应的代码，
    然后使用 import 语法进行导入Header、Content和Footer,代码如下 */
    import { Header, Content, Footer } from "./components";
    export class Page {
    constructor() {
        new Header();
        new Content();
        new Footer();
    }
    }

    /*这时候可以使用tsc进行编译。然后可以看到编译好的代码都是define开头的
    (这是 amd 规范的代码，不能直接在浏览器中运行，可以在 Node 中直接运行)，
    这种代码在浏览器中是没办法被直接运行的，需要其他库(require.js)的支持。*/

//引入require.js
    //使用了一个现成的 CDN 的require.js,地址你可以直接复制，然后用<script>标签进行引入。
    //Require.js 的 CDN 地址： https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js
    //复制好 URL 地址后，记得使用<script>标签进行引入，代码如下。
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
    //就可以解析define这样的语法了。然后把page.ts中加入default关键字，如果不加是没办法直接引用到的
    //再用tsc进行编译一下，你会发现还是又问题。因为使用export default这种形式的语法，需要在html里用require来进行引入。


//require方式引入
    //因为你已经加入了require.js这个库，所以现在可以直接在代码中使用require了。具体代码如下：
    <body>
        <script>
            require(["page"], function (page) {
            new page.default();
            });
        </script>
    </body>
    //至此刷新页面，可以看到正常显示出来了 






</script>